<template>
  <div
    class='tender-info'
    :style="{minHeight: height+'px'}"
  >
    <header>
      <div class="main-width mx-auto">
        <h3 class="text-center">
          {{announcement.tenderName}}
          <span
            class="badge badge-pill badge-info tender-mark"
            :class="[getType(announcement.tenderType).className]"
          >{{getType(announcement.tenderType).name}}</span>
        </h3>
        <p class="d-flex justify-content-between">
          <span><strong>项目编号：</strong>{{announcement.tenderNumber}}</span>
          <span><strong>项目区域：</strong>{{announcement.area}}</span>
          <span v-if="announcement.tenderType === '1B04489AE16511E8B55FFA7DEC4CE400'"><strong>开标时间：</strong>{{$formatDateTime(announcement.startTime)}}</span>
          <span v-if="announcement.tenderType === '1B0448F0E16511E8B55FFA7DEC4CE400'"><strong>公示结束时间：</strong>{{$formatDateTime(announcement.publicTime)}}</span>
          <span v-if="announcement.uptime !== announcement.ctime"><strong>更新事件：</strong>{{$formatYMD(announcement.uptime)}}</span>
          <span><strong>发布时间：</strong>{{$formatYMD(announcement.ctime)}}</span>
        </p>
      </div>
    </header>
    <main class="main-width mx-auto">
      <!-- 中标标段 -->
      <div v-if="getType(announcement.tenderType).name === '中标公告' && announcement.bid && announcement.bid.length > 0">
        <h5 class="text-center font-weight-bold">中标标段</h5>
        <el-card
          shadow="always"
          class="invite-card-info mx-auto"
        >
          {{announcement.bid}}
        </el-card>
      </div>
      <!-- 中标单位 -->
      <div v-if="getType(announcement.tenderType).name === '中标公告'">
        <h5 class="text-center font-weight-bold">中标单位</h5>
        <div
          class="d-flex justify-content-center flex-wrap"
          @click="goEc(announcement.companyId)"
        >
          <el-card
            shadow="always"
            class="invite-card-info"
          >
            <div class="d-flex justify-content-between">
              <div class="invite-card-content">
                <p>{{announcement.company}}</p>
                <p><strong>中标价格：</strong><span>{{announcement.price}}元</span></p>
              </div>
              <img
                src="static/logo-big.png"
                alt=""
                width="70"
                height="70"
              >
            </div>
          </el-card>
        </div>

      </div>
      <!-- 中标候选人 -->
      <div v-if="getType(announcement.tenderType).name === '中标候选人公告'">
        <h5 class="text-center font-weight-bold">中标候选人</h5>
        <div
          class="d-flex flex-wrap"
          :class="{ 'justify-content-center': candidate.length <= 1, 'justify-content-between': candidate.length > 1 }"
        >
          <el-card
            class="invite-card-info"
            v-for="row in candidate"
            :key="row.candidateId"
          >
            <div
              class="d-flex justify-content-between"
              @click="goEc(row.companyId)"
            >
              <div class="invite-card-content">
                <p>{{row.compnayName}}</p>
                <p><strong>项目经理：</strong>{{row.projectManager}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>投标金额：</strong><span>{{row.tenderPrice}}元</span></p>
              </div>
              <img
                src="static/logo-big.png"
                alt=""
                width="70"
                height="70"
              >
            </div>
          </el-card>
        </div>

      </div>
      <!-- 公告详情 -->
      <div>
        <h5 class="text-center font-weight-bold">公告详情</h5>
        <div
          id="event-details-content"
          v-html="announcement.tenderContent"
        ></div>
      </div>

      <!-- 原公告，针对变更公告 -->
      <div
        class="alert alert-light pl-0"
        role="alert"
        v-if="getType(announcement.tenderType).name === '变更公告' && announcement.originalName"
      >
        <a
          href="#"
          class="alert-link"
          @click="goOriginal()"
        >原公告：{{announcement.originalName}}</a>
      </div>

      <!-- 附件下载预览，附件数量限制一个 -->
      <el-card
        class="invite-card-file"
        v-for="attac in attachments"
        :key="attac.id"
      >
        <div class="d-flex flex-column">
          <div class="file-name">
            <img
              src="static/fujiantubiao.png"
              alt=""
              width="50"
              height="50"
            >
            <span class="ml-3">{{attac.name}}</span>
          </div>
          <div class="file-btn">
            <a @click.stop="downloadFile(attac.url, attac.name)">下载</a>
            <a
              target="_blank"
              :href="getUrl(attac.url, attac.name)"
            >
              预览
            </a>
          </div>
        </div>
      </el-card>
    </main>

  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "invitetenderinfo",
  title: "招标详情",
  data() {
    return {
      id: "",
      type: "",
      announcement: {},
      candidate: [],
      attachments: [],
      types: [
        { name: "所有项目", type: "", className: "" },
        {
          name: "招标公告",
          type: "1B04489AE16511E8B55FFA7DEC4CE400",
          className: "mark-primary"
        },
        {
          name: "变更公告",
          type: "1B044914E16511E8B55FFA7DEC4CE400",
          className: "mark-caramel"
        },
        {
          name: "中标候选人公告",
          type: "1B0448F0E16511E8B55FFA7DEC4CE400",
          className: "mark-blue"
        },
        {
          name: "中标公告",
          type: "1B044904E16511E8B55FFA7DEC4CE400",
          className: "mark-green"
        },
        {
          name: "其他公告",
          type: "1B044937E16511E8B55FFA7DEC4CE400",
          className: "mark-gray"
        }
      ]
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.id = this.$uncompileStr(this.$route.params.id);
      this.type = this.$uncompileStr(this.$route.params.type);
      axios
        .post(
          "/mscs/tender/findTenderContentById",
          this.$paramsConvert({ tenderId: this.id, tenderType: this.type })
        )
        .then(res => {
          if (res.data.code === 1) {
            this.announcement = Object.assign(
              {},
              this.announcement,
              res.data.data.mscsTenderAnnouncement
            );
            this.candidate = [...res.data.data.mscsTenderCandidate];
            // 判断有没有附件
            if (res.data.data.mscsTenderAnnouncement.attachment.length > 10) {
              this.attachments = JSON.parse(
                res.data.data.mscsTenderAnnouncement.attachment
              );
            }
          } else {
            this.$codeError(res);
          }
        })
        .catch(error => {
          this.$catchError(error);
        });
    },
    getType(type) {
      let index = this.types.findIndex(item => {
        return item.type === type;
      });
      if (index === -1) {
        return { name: "", type: "", className: "" };
      }
      return this.types[index];
    },
    getStart(time) {
      let diff = parseInt(time) - new Date().getTime();
      if (diff > 1000 * 60 * 60 * 24) {
        // 大于一天
        return `${parseInt(diff / 1000 / 60 / 60 / 24)}天`;
      } else if (diff > 1000 * 60 * 60) {
        // 大于一小时
        return `${parseInt(diff / 1000 / 60 / 60)}小时`;
      } else if (diff > 0) {
        return "小于1小时";
      } else {
        return "已开标";
      }
    },
    // 从企业卡片跳转企业主页
    goEc(id) {
      if (!(id && id.length > 5)) {
        // 如果有id则为协会会员企业
        this.$message({
          showClose: true,
          message: "该公司没有企业主页，为您带来不便经请谅解！",
          type: "warning"
        });
        return;
      }
      const { href } = this.$router.resolve({
        name: "echome",
        params: { id: this.$compileStr(id) }
      });
      window.open(href, "_blank");
    },
    downloadFile(url, name) {
      location.href = `/mscs/user/downloadFile?fileUrl=${url}&fileName=${name}`;
    },
    getUrl(url, name) {
      if (this.$isBrowserCan(name)) {
        return url;
      }
      // 注意一下url不能换行
      return `http://mscs.e-tudou.com:10000/loleaflet/ffc419a/loleaflet.html?WOPISrc=http://mscs.e-tudou.com:10001/wopi/files/${name}&access_token=${url}`;
    },
    goOriginal() {
      const { href } = this.$router.resolve({
        name: "invitetenderinfo",
        params: {
          id: this.$compileStr(this.announcement.originalId),
          type: this.$compileStr("1B04489AE16511E8B55FFA7DEC4CE400")
        }
      });
      window.open(href, "_blank");
    }
  },
  computed: {
    height() {
      return (
        this.$store.state.height.client -
        this.$store.state.height.header -
        this.$store.state.height.footer
      );
    }
  }
};
</script>
<style lang='scss'>
.tender-info {
  margin-bottom: 60px;
  > header {
    min-height: 180px;
    padding-top: 50px;
    padding-bottom: 10px;
    background-color: #edefea;

    h3 {
      position: relative;
      margin-bottom: 60px;
      font-weight: bold;
      span {
        top: 5px;
        margin-left: 10px;
      }
    }
    p {
      font-size: 14px;
      color: #333;
    }
  }
  h5 {
    margin: 60px 0 40px 0;
  }
  img {
    max-width: 1260px;
  }
}
.tender-mark {
  font-size: 14px;
  padding: 6px 10px;
}
.invite-card-info {
  margin: 10px;
  width: 580px;
  box-shadow: 0px 5px 10px #999 !important;
  &:hover {
    .invite-card-content {
      p:nth-child(1) {
        color: #94c05a;
      }
    }
  }
  cursor: pointer;
  .el-card__body {
    padding: 10px 15px;
  }
  .invite-card-content {
    p:nth-child(1) {
      font-size: 20px;
      line-height: 20px;
      margin-top: 10px;
      margin-left: -15px;
      padding-left: 10px;
      font-weight: bold;
      border-left: 15px solid #a0c66e;
    }
    p:nth-child(2) {
      padding-left: 10px;
      font-size: 15px;
      margin-bottom: 0;
      line-height: 15px;
      span {
        color: #94c05a;
      }
    }
  }
}

.invite-card-file {
  width: 380px;
  border: 1px solid #999;
  box-shadow: 0px 5px 10px #999 !important;
  cursor: pointer;
  &:hover {
    span {
      color: #94c05a;
    }
  }
  .el-card__body {
    padding: 0;
  }
  > div {
    .file-name {
      padding: 10px;
    }
    .file-btn {
      display: flex;
      border-top: 1px solid #999;
      a {
        flex: 1;
        padding: 6px;
        color: #94c05a;
        text-align: center;
        background: none;
        border: none;
      }
      a + a {
        border-left: 1px solid #999;
      }
    }
  }
}
</style>